<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				position: relative;
			}
			ul{
				list-style: none;
				border-bottom: 1px solid black;
				width: 940px;
				background: lightgray;
			}
			.clearfix:after{
				content: '';
				display: block;
				clear: both;
			}
			.clearfix:before{
				content: '';
				display: block;
				clear: both;
			}
			li{
				float: left;
				line-height: 40px;
				padding: 10px;
				/* border: 1px solid red; */
			}
			.image1{
				height: 40px;
				padding-left: 20px;
				padding-right: 180px;
			}
			.image2{
				padding: 6px 0 ;
			}
			.image3{
				padding-top: 15px;
			}
			.target{
				width: 300px;
				height: 230px;
				border: 1px solid lightgray;
				position: absolute;
				left: 555px;
				top: 38px;
				background: #ffffff;
			}
			p{
				float: left;
				padding: 2px 15px;
				/* border: 1px solid red; */
			}
			.main{
				border-bottom: 1px solid lightgray;
				margin:10px 10px;
				padding-bottom: 15px;
			}
			#end{
				border: none;
			}
			.main:after{
				content: '';
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="clearfix">
				<li class="image1"><img src="img/logo.gif" alt="" width="80px" height="40px"/></li>
				<li>购物车</li>
				<li class="image3"><img src="img/top_bg.gif" alt="" width="1px" height="20px"/></li>
				<li>优惠券</li>
				<li class="image3"><img src="img/top_bg.gif" alt="" width="1px" height="20px"/></li>
				<li>快速注卡</li>
				<li class="image3"><img src="img/top_bg.gif" alt="" width="1px" height="20px"/></li>
				<li>各地购课</li>
				<li class="image3"><img src="img/top_bg.gif" alt="" width="1px" height="20px"/></li>
				<li>手机报</li>
				<li class="image3"><img src="img/top_bg.gif" alt="" width="1px" height="20px"/></li>
				<li>网站导航</li>
				<li class="image2"><img src="img/open_icon.gif" alt="" width="12px" height="8px"/></li>
			</ul>
			<div class="target">
				<div class="main">
					<p>托福</p>
					<p>雅思</p>
					<p>考研</p>
					<p>职称英语</p>
					<p>初中</p>
					<p>日语</p>
				</div>
				<div class="main">
					<p>网络课堂</p>
					<p>资讯中心</p>
					<p>知识堂</p>
					<p>大师讲坛</p>
					<p>学习论坛</p>
					<p>学词</p>
					<p>考研搜校</p>
				</div>
				<div class="main" id="end">
					<p>M-Zone</p>
					<p>手机报</p>
					<p>时时英语</p>
				</div>
			</div>
		</div>
	</body>
</html>
